<template>
  <div class="ipt2">
      <van-search
        v-model="value"
        shape="round"
        placeholder="热搜产品：粉底"
        input-align="center" 
        @cancel="onCancel"
        :left-icon="require('./img/定制2_slices/dingzhi_icon_sousuo@2x.png')"
        
      >       
      </van-search>
    

  </div>
    
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
  },
};
</script>

<style lang="scss" >
  .ipt2{
    opacity: 0.77;
    position: relative;
    height: 90px;
    width: 35.75rem;
    margin-left: 5.5rem;
    margin-top: 1.5rem;
    .van-search{
        border-radius: 30px 30px 30px 30px;  
        width: auto;
        height: auto;
        
        opacity: 1;
        // background: #F5F5F5  100%;
       
        width:600px;
        input{
          opacity: 0.77;
          background:"#F5F5F5";
          width: 473px;
          height: 62px;
          position: relative;
          
        }
        /*  搜索框图片位置更改 给input加相对定位  */
        .van-field__left-icon{
            width: 30px;
            height: 30px;
            // margin-top: 15px;
            //  margin-bottom: 15px;
            //  margin-left: 138px;
            //  margin-right: 303px; 
             transform: translate(10.25rem, 1.1rem);
                       
            i{
              font-size:28.77px;
              font-family: #F5F5F5 100%;
              color: #CBCBCB;
              
            }
          }
          /* placehoder的样式   input-align="center"  位置 */
       input::placeholder{
          // width: 140px;
          // height: 28px;
          font-size: 20px;
          font-family: PingFangSC-Medium-, PingFangSC-Medium;
          // font-weight: normal;
          color: #CBCBCB;
          // line-height: 24px;
          // text-align: center;
          // margin-left:203px;
        }

    }
  }
</style>